<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>购物车</title>
    <link rel="stylesheet" href="/style/weui.css"/>
    <link rel="stylesheet" href="/style/swiper.min.css"/>
    <link rel="stylesheet" href="/style/example.css"/>
    <link rel="stylesheet" href="/style/sweetalert.css"/>
    <style>
        .dianji:before { border: 10px solid transparent; }
    </style>
</head>
<body ontouchstart>
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-tab__panel cart-list">
                <div class="weui-cells weui-cells_checkbox">
                    <!-- list -->
                    <div class="weui-panel" id="cartBox">
                        <?php if (empty($cartArr)) { ?>
                            <div style="padding: 100px; text-align: center"> 没有商品 </div>
                        <?php } else { ?>
                        <?php $whName = ''; foreach ($cartArr as $cart) { ?>
                                <?php if($whName != $cart['warehouseName']) { $whName=$cart['warehouseName']; ?>
                                    <div style="font-size: 14px;padding: 5px">仓库：<?=$whName?></div>
                                <?php }?>
                                <div name="cartConent" class="weui-media-box weui-media-box_appmsg">
                                <label class="weui-media-box__hd" for="<?=$cart['materielId']?>" style="width: 110px">
                                    <input type="checkbox" class="weui-check" name="cartCheck" id="<?=$cart['materielId']?>"
                                           data-id="<?=$cart['materielId']?>"
                                           data-name="<?=$cart['materielName']?>"
                                           data-pack="<?=$cart['packDesc']?>"
                                           data-spec="<?=$cart['specDesc']?>"
                                           data-orderUnit="<?=$cart['orderUnit']?>"
                                           data-warehouseId="<?=$cart['warehouseId']?>"
                                    >
                                    <i class="weui-icon-checked"></i>
                                    <img class="weui-media-box__thumb" src="<?=$cart['img']?>">
                                </label>
                                <div class="weui-media-box__bd">
                                    <p class="weui-media-box__title">
                                        <?=$cart['materielName']?><br/>
                                        <span class="text-red"><?=$cart['specDesc']?></span><br/>
                                        <span><?=$cart['orderUnit']?></span><br>
                                        <?php if ($shopType==1) { ?>
                                            <span>售价:<?=$cart['salePrice']?></span>
                                        <?php } ?>
                                        <i class="icon iconfont icon-del dianji" style="margin-top: -35px;cursor: pointer" name="cartDel" data-val="<?=$cart['materielId']?>"></i>
                                    </p>
                                    <div style="position: absolute; right: 10px; bottom: 12px">
                                        <div class="weui-cell__ft add-box">
                                            <i class="icon iconfont icon-add dianji" data="+1" data="-1" data-id="<?=$cart['materielId']?>"></i>
                                            <input type="number" name="amount" style="width: 30px" class="weui-input" salePrice="<?=$cart['salePrice']?>" value=<?=$cart['amount']?> data-id="<?=$cart['materielId']?>">
                                            <i class="icon iconfont icon-reduce dianji" data="-1" data-id="<?=$cart['materielId']?>"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php } } ?>
                    </div>
                    <!-- list end-->
                </div>
            </div>
            <!-- tabbar -->
            <div class="tabbar-box">
                <div class="weui-tabbar" style="bottom: 45px">
                    <div class="detail-tabbar-left weui-cells_checkbox">
                        <label class="weui-cell__hd" for="all">
                        <input type="checkbox" class="weui-check" id="all">
                        <i class="weui-icon-checked" style="margin-top: -3px"></i>
                        </label>
                        <span>全选</span>&nbsp;&nbsp;
                        商品数:<span id="goodsCnt">0</span>&nbsp;
                        订购数:<span id="orderCnt">0</span>
                        <?php if ($shopType==1) { ?>
                            总价:<span id="totalPrice">0</span>
                        <?php } ?>
                    </div>
                    <a id="goBuy" href="javascript:goBuy();" class="weui-btn weui-btn_warn detail-tabbar-right">去结算</a>
                </div>
                <div class="weui-tabbar" style="bottom: 0px">
                    <a href="/" class="weui-tabbar__item">
                        <span class="weui-tabbar__icon"><i class="icon iconfont icon-home"></i></span>
                        <p class="weui-tabbar__label">首页</p>
                    </a>
                    <a href="/product" class="weui-tabbar__item">
                        <span class="weui-tabbar__icon"><i class="icon iconfont icon-commodity"></i></span>
                        <p class="weui-tabbar__label">商品</p>
                    </a>
                    <a href="/cart" class="weui-tabbar__item weui-bar__item_on">
                        <span class="weui-tabbar__icon"><i class="icon iconfont icon-buy"></i></span>
                        <p class="weui-tabbar__label">购物车</p>
                    </a>
                    <a href="/order/list" class="weui-tabbar__item">
                        <span class="weui-tabbar__icon"><i class="icon iconfont icon-my"></i></span>
                        <p class="weui-tabbar__label">我的订单</p>
                    </a>
                </div>
            </div>
            <!-- tabbar end-->
        </div>
    </div>
</div>

<script src="/js/zepto.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script src="/js/swiper.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>

<script>
    $(function () {

        // 全选 反选
        $("#all").on("click", function () {
            if ($(this).is(':checked')) {
                $("#cartBox input[type='checkbox']").prop("checked", true)
            } else {
                $("#cartBox input[type='checkbox']").prop("checked", false)
            }
            goodsCnt();
        });

        //修改商品数量
        $(document).on("click", ".add-box i", function () {
            var _this = this;
            var data = parseInt($(this).attr("data")),
                val = parseInt($(this).siblings("input").val());
            var materielId = $(this).attr("data-id");
            var amount = data;
            if (val + data === 0) {
                amount = 0;
            }
            $.post(
                '/cart/add-cart',
                {'list': [{'materielId': materielId, 'amount': amount}]},
                function (o) {
                    if (o.code == 200) {
                        $(_this).siblings("input").val(val + data);
                        if (amount == 0) {
                            $(_this).parents('div[name=cartConent]').remove();
                        }
                        goodsCnt();
                    }
                },
                'json'
            );
        });

        //删除商品
        $(document).on('click', 'i[name=cartDel]',function () {
            var _this = this;
            var materielId = $(this).attr('data-val');
            swal({
                title: '提示',
                text: '是否确认删除？',
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                showCancelButton: true,
                closeOnConfirm: false
            }, function (flg) {
                if (flg) {
                    $.post(
                        '/cart/add-cart',
                        {'list': [{'materielId': materielId, 'amount': 0}]},
                        function (o) {
                            if(o.code == 200){
                                $(_this).parents('div.weui-media-box').remove();
                                goodsCnt();
                            }else{
                                swal('操作失败');
                            }
                        },
                        'json'
                    );
                }
                swal.close();
            });
        });

        //修改商品数量
        $(document).on('blur','input[name=amount]', function () {
            var materielId = $(this).attr("data-id");
            var amount = $(this).val();
            if (!amount || !$.isNumeric(amount) || amount < 0) {
                swal('请输入正确的数量');
                $(this).focus();
                return;
            }
            $.post(
                '/cart/add-cart',
                {'list': [{'materielId': materielId, 'amount': amount, editFlg: 1}]},
                function (o) {
                    goodsCnt();
                },
                'json'
            );
        });

        //勾选商品
        $(document).on('change','input[name=cartCheck]', function () {
            goodsCnt();
        });
        goodsCnt();
    });

    //商品数量
    function goodsCnt() {
        var shopType =  <?=$shopType?>;

        var orderCnt = 0, goodsCnt = 0 ,totalPrice = 0;

        $.each($('div[name=cartConent]'), function (i, v) {

            if($(this).find('input[name=cartCheck]').is(':checked')){

                goodsCnt++;
                inputd = $(this).find('input[name=amount]');
                thisCnt = parseFloat(inputd.val());
                orderCnt+=thisCnt;
                thisSalePrice = parseFloat(inputd.attr('salePrice'));
                totalPrice += (thisCnt*thisSalePrice);

            }
        });
        $('#orderCnt').html(orderCnt);
        $('#goodsCnt').html(goodsCnt);

        <?php if ($shopType==1) { ?>
        $('#totalPrice').html(totalPrice.toFixed(4));
        <?php } ?>
    }

    //去结算
    function goBuy() {


        /**
        <?php if ($shopType==1) { ?>
        var  totalPrice = 0;
        $.each($('div[name=cartConent]'), function (i, v) {

            if($(this).find('input[name=cartCheck]').is(':checked')){
                var inputd = $(this).find('input[name=amount]');
                var thisCnt = parseFloat(inputd.val());
                var thisSalePrice = parseFloat(inputd.attr('salePrice'));
                totalPrice += (thisCnt*thisSalePrice);

            }
        });


        if(totalPrice < 2000) {
            swal('订单金额小于2000元,无法提交订单!');
            return false;
        }
        <?php } ?>

         **/



        var ckList = $('#cartBox input[name=cartCheck]:checked');
        if (ckList.length == 0) {
            swal('请选择商品');
            return false;
        }
        var goodsData = [];
        $.each(ckList, function (i, v) {
            var materielId = $(this).attr('data-id');
            var name = $(this).attr('data-name');
            var pack = $(this).attr('data-pack');
            var spec = $(this).attr('data-spec');
            var orderUnit = $(this).attr('data-orderUnit');
            var warehouseId = $(this).attr('data-warehouseId');

            var amount = $(this).parents('div').find('input[name=amount]').val();
            var salePrice = $(this).parents('div').find('input[name=amount]').attr('salePrice');
            goodsData.push({
                materielId: materielId,
                materielName: name,
                packDesc: pack,
                specDesc: spec,
                orderUnit: orderUnit,
                amount: amount,
                salePrice: salePrice,
                warehouseId: warehouseId
            });
        });
        $.post(
            '/cart/go-buy',
            {'goods': goodsData},
            function (o) {
                if (o.code == 200) {
                    location.href = '/order/index';
                } else {
                    swal(o.msg);
                }
            },
            'json'
        );
    }
</script>
</body>
</html>
